<template>
	<div>
		<div class="head">
			<router-link class="operating" tag="span" to="/Login">返回登录</router-link>
		</div>
		<div class="overlay">
			<div class="overlay-content scrolling">
				<div class="title-hd">忘记密码</div>
				<div class="main">
					<van-cell-group>
						<van-field v-model.trim="Account" maxlength="20" placeholder="请输入帐号" clearable/>
					</van-cell-group>
					<van-cell-group style="background: #2C3145;color: #858dac;padding: 10px 15px;" v-if="list != '' && list != null">
						<div>请依次点击助记词</div>
						<div style="color: white;font-size: 13px;background: #2c3145;">
							<van-grid :column-num="3" class="registerList">
								<van-grid-item v-for="(item,index) in list" :key="Math.random()">
									<div :class="{'red': index === oc}" style="border: 1px solid rgb(93,107,151);padding: 3px 8px;border-radius: 5px;background: rgb(93,107,151);width:70%">
										<span v-text="item" @click="setActive(item,index)"></span>
									</div>
								</van-grid-item>
							</van-grid>
						</div>
					</van-cell-group>
					<van-cell-group>
						<van-field v-model.trim="Pwd" type="password" placeholder="设置密码（6~20位数字+字母组合）" maxlength="20" clearable/>
					</van-cell-group>
					<van-cell-group>
						<van-field v-model.trim="Pwd2" type="password" placeholder="请再次输入设置密码" maxlength="20" clearable/>
					</van-cell-group>
				</div>
				<div class="btn">
					<van-button slot="button" size="normal" type="info" :loading="loading" @click.native="Find">确认</van-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	let _this;
	import { base } from './../utils/api';
	import { debounce } from './../utils/debounce'; // 函数节流-高频操作需要
	export default {
		name: 'FindPwd',
		data() {
			return {
				subDisabled: false,
				Account: '', // 账号
				Pwd: '', // 密码
				Pwd2: '', // 确认密码
				agreeId: 0,
				loading: false,
				k: '', //凭证K值
				v: '', //凭证V值
				list: [
					'name','list','name2','list2','name3','list3','name4','list4','name5','list5','name6','list6'
				],
				listArray: [],
				listString: '',
				oc: '',
				message: 0
			}
		},
		beforeCreate() {
			_this = this;
		},
		created() {
			this.$watch('Account', debounce((val) => { // 这里的 val 是输入的值
				if(val){ // 如果存在才执行
            		this.getUserName(val);
            	}
			}, 200));
		},
		methods: {
			getUserName(val) { // 助记词查询
				base.usernamezjc({
					'userName': val,
				}).then(res => {
					if(res.code == 200) {
						this.list = res.data;
					}
				})
			},
			setActive (item,index) {
				this.message ++;
				if(this.message <= 12){
					this.listArray.push(item);
					this.listString = this.listArray.join(' ');
				  	this.oc = index;
				  	this.$toast("您第"+ this.message +"次选择的是：" + item);
				}else{
					this.message = 0;
					this.listArray = [];
					this.listString = '';
					this.$toast("助记词次数已重置，请重新选择");
				}
			},
			Find() {
				if(this.Account == '') {
					this.$toast('帐号不能为空');
					return false;
				} else {
					if(this.Account.length < 4 || this.Account.length > 20) {
						this.$toast('帐号长度在4-20之间');
						return false;
					}
				}
				if(this.listArray == []) {
					this.$toast('助记词不能为空');
					return false;
				}
				if(this.message != 12) {
					this.$toast('请完成12个助记词选择');
					return false;
				}
				if(this.Pwd == '') {
					this.$toast('新密码不能为空');
					return false;
				} else {
					if(this.Pwd.length < 6 || this.Pwd.length > 20) {
						this.$toast('新密码长度在6-20之间');
						return false;
					}
				}
				if(this.Pwd != this.Pwd2) {
					this.$toast('两次输入密码不一致，请重新输入1');
					return false;
				}
				base.getCredentials().then(res => {
					if(res.code == 8008) {
						this.k = res.data.k;
						this.v = res.data.v;
						base.getForgetPwd({
							'userName': this.Account,
							'auxiliaries': this.listString,
							'encryptedData': this.rsaEncrypt(this.Pwd + ',' + this.Pwd2 + ','+ this.v),
							'key': this.k
						}).then(res => {
							if(res.code == 200) {
								setTimeout(() => {
									this.$router.push('/Login');
								}, 1000);
							}
							this.$toast(res.msg);
							this.loading = false;
						})
					}
				})
			}
		},
		watch: { // 这里的验证请勿注释（如果要设置IOS不能输入中文，请更改type的值为email，安卓的话就需要下面的这些限制）
			Pwd: function() {
				this.Pwd = this.Pwd.replace(/[\u4e00-\u9fa5]/ig, ' '); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Pwd2: function() {
				this.Pwd2 = this.Pwd2.replace(/[\u4e00-\u9fa5]/ig, ' '); // 密码不能输入中文（主要防止其他地方复制的中文粘贴过来）
			},
			Account: function() {
				this.Account = this.Account.replace(/[\u4e00-\u9fa5]/ig, ' '); // 帐号不能输入中文
			}
		}
	}
</script>

<style lang="less" scoped="scoped">